<template>
  <el-dialog :title="title" :visible.sync="visible" :width="width" @close="closeHandler" :append-to-body="appendToBody">

    <div class="box-container" :style="{ maxHeight }">
      <slot />
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandler">取 消</el-button>
      <el-button type="primary" @click="confirmHandler">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "40%",
    },
    maxHeight: {
      type: String,
      default: "40vh",
    },
    title: {
      type: String,
      default: "编辑内容",
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    confirm: {
      type: Function,
      default: () => { }
    },
    close: {
      type: Function,
      default: () => { }
    }
  },
  data() {
    return {};
  },
  methods: {
    confirmHandler() {
      this.confirm();
    },
    closeHandler() {
      this.close();
    }
  },
};
</script>

<style lang="less" scoped>
.box-container {
  min-height: 30vh;
  max-height: 40vh;
  overflow-x: scroll;
  overflow-x: hidden;
  padding: 0 10px;

  // 自定义滚动条
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #dcdcdc;
    border-radius: 8px;
    border: 2px solid #f5f5f5;
  }

  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(#808080, .5);
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb:hover {
    // background-color: #0056b3;
    background-color: #a4adcd;
  }

  &::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
